import React, { useEffect } from "react";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { NavLink, useNavigate } from "react-router-dom";
import { fetchAddressList } from "../../app/modules/address/addressSlice";
const Index = () => {
  const dispatch = useAppDispatch();
  const addressList = useAppSelector((state) => state.address.addressList);
	const navigate = useNavigate()
  useEffect(() => {
    dispatch(fetchAddressList());
  }, []);
  return (
    <div>
      <ul>
        {addressList.map((v) => {
          return (
            <li
              key={v.id}
              style={{ borderBottom: "1px solid #ccc" }}
              onClick={() => {
								navigate(`/address/list/${v.id}/edit`, {
									state: v
								})
							}}
            >
              <h3>
                {v.nickname}---{v.address}
              </h3>
              <p>联系方式： {v.tel}</p>
            </li>
          );
        })}
      </ul>
      <NavLink to="/address/list/add">新增收货地址</NavLink>
    </div>
  );
};

export default Index;
